<template>
  <view class="calendar">
    <view class="calendar__header" v-show="!fold">
      <view class="calendar__month">{{ monthYear }}</view>
      <view class="calendar__action">
        <u-button class="calendar__button" @click="previousMonth">
          <u-icon name="arrow-left"></u-icon>
        </u-button>
        <u-button class="calendar__button" @click="nextMonth">
          <u-icon name="arrow-right"></u-icon>
        </u-button>
      </view>
    </view>
    <view class="calendar__body">
      <view class="calendar__row calendar__row--header">
        <view v-for="day in localizedDaysOfWeek" class="calendar__cell calendar__cell--header" :key="day">{{ day }}</view>
      </view>
      <view v-for="week in weeks" class="calendar__row" :key="week">
				<!-- 判断是否需要禁用时间 -->
        <view
          v-for="day in week"
          :key="day"
          :class="['calendar__cell', { 'calendar__cell--today': isToday(day), 'calendar__cell--selected': isSelected(day) }, {'calendar__cell--disabled': isCurrentDayBeforeDisabled?isBeforeday(day):false}]"
          @click="select(day)">{{ day.format('D') }}</view>
      </view>
    </view>
    <view class="calendar__toggle">
      <u-icon :name="fold ? 'arrow-up' : 'arrow-down'" @click="handleToggle"></u-icon>
    </view>
  </view>
</template>

<script>
import moment from 'moment'
import 'moment/locale/zh-cn'

export default {
  name: 'Calendar',
  props: {
    value: {
      type: Date,
      default: () => new Date(),
    },
		isCurrentDayBeforeDisabled: {
			type: Boolean,
			default: false,
		}
  },
  data() {
    return {
      currentDate: moment(this.value),
      weeks: [],
      localizedDaysOfWeek: [],
      monthYear: '',
      fold: false,
    }
  },
  created() {
    this.updateCalender()
  },
  methods: {
    previousMonth() {
      this.currentDate.subtract(1, 'month')
      this.updateCalender()
    },
    nextMonth() {
      this.currentDate.add(1, 'month')
      this.updateCalender()
    },
    isToday(day) {
      return day.isSame(moment(), 'day')
    },
		isBeforeday(day) {
			
      return day.isBefore(moment(), 'day')
    },
    isSelected(day) {
      return day.isSame(this.value, 'day')
    },
    select(day) {
			// 将字符串转换为moment对象
			let clickedDate = moment(day).format('YYYY-MM-DD');
			// 获取当前日期
			let currentDate = moment().format('YYYY-MM-DD');
			// 判断点击的日期是否小于当前日期
			if (moment(clickedDate).isBefore(currentDate)) {
				return false
			}
      this.$emit('input', day.toDate())
    },
    updateCalender() {
      this.localizedDaysOfWeek = this.setLocalizedDaysOfWeek()
      this.weeks = this.setWeeks()
      this.monthYear = this.currentDate.format('YYYY年M月')
    },
    setLocalizedDaysOfWeek() {
      const weekdays = moment.weekdaysMin()
      return [...weekdays.slice(1), weekdays[0]]
    },
    setWeeks() {
      const weeks = []
      const firstDayOfMonth = moment(this.currentDate).startOf('month').startOf('week')
      const lastDayOfMonth = moment(this.currentDate).endOf('month').endOf('week')
      let currentDay = moment(firstDayOfMonth)
      const startOfWeek = moment(this.currentDate).startOf('isoWeek')
      const endOfWeek = moment(this.currentDate).endOf('isoWeek')

      while (currentDay.isSameOrBefore(lastDayOfMonth)) {
        const week = []

        for (let i = 0; i < 7; i++) {
          if (this.fold) {
            // 如果折叠起来的话需要判断 currentDay 是否在当天的一周内
            if (currentDay.isBetween(startOfWeek, endOfWeek)) {
              week.push(moment(currentDay))
            }
          } else {
            week.push(moment(currentDay))
          }
          currentDay.add(1, 'day')
        }

        week.length && weeks.push(week)
      }

      return weeks
    },
    handleToggle() {
      this.fold = !this.fold
      this.updateCalender()
    },
  },
  watch: {
    value(newValue) {
      this.currentDate = moment(newValue)
    },
    currentDate: {
      deep: true,
      immediate: true,
      handler() {
        this.$emit('update:value', this.currentDate.toDate())
        this.updateCalender()
      },
    },
  },
}
</script>

<style lang="scss" scoped>
.calendar {
  // font-family: sans-serif;
  display: inline-block;
  background: #fff;

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18rpx 18rpx 18rpx 34rpx;
    font-size: 16px;
  }

  &__action {
    display: flex;
  }

  &__button {
    width: 60rpx;
    height: 60rpx;
    font-size: 20px;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__month {
    margin: 0;
  }

  &__body {
    display: flex;
    flex-wrap: wrap;
		width: 750rpx;
  }

  &__row {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    // margin-bottom: 8px;
    margin-bottom: 18rpx;

    &--header {
      font-weight: bold;
    }
  }

  &__cell {
    flex: 1 0 calc(100% / 7);
    padding: 8px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    color: #333333;
    &--today {
      // background-color: #f0f0f0;
    }

    &--selected {
      // background-color: #428bca;
      color: white;
      position: relative;
      isolation: isolate;
      &::after {
        content: '';
        position: absolute;
        background: #1767fa;
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        z-index: -1;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
    }
		&--disabled {
      // background-color: #428bca;
      color: #c8c9cc;
			cursor: not-allowed;
      // position: relative;
      // isolation: isolate;
      // &::after {
      //   content: '';
      //   position: absolute;
      //   background: #1767fa;
      //   width: 60rpx;
      //   height: 60rpx;
      //   border-radius: 50%;
      //   z-index: -1;
      //   top: 50%;
      //   left: 50%;
      //   transform: translateX(-50%) translateY(-50%);
      // }
    }
    &--header {
      font-weight: bold;
      color: #7f7f7f;
    }
  }

  &__toggle {
    display: flex;
    justify-content: center;
    padding-bottom: 12rpx;
  }
}
</style>
